import React, { Component } from 'react';
import { Button, Cascader, NavBar, Toast,List, Space } from 'antd-mobile'
import request from "../../api"
import { options } from "./data"
import Item from 'antd/es/list/Item';
import "./shoppaddress.css"


interface Props {
   
}
interface State {
    visible: boolean,
    value: string[]

}
const id = localStorage.getItem("userid")
class Shoppaddress extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            visible: false,
            value: []
        }
    }

    //请求地址列表
    componentDidMount(): void {



    }
    textlist(v: any) {
        this.setState({ value: v })
    }
    render() {
        return (
            <div className='shoppaddress'>
                <Space className='shopp_top'>
                    <List className='dizhi'>
                        <List.Item   onClick={() => {
                            this.setState({ visible: true })
                        }}>送至 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                       
                       
                 
                    <Cascader
                        options={options}
                        visible={this.state.visible}
                        onClose={() => {
                            this.setState({ visible: false })
                        }}
                        value={this.state.value}
                        onConfirm={() => {
                            this.setState({ value: this.state.value })
                        }}
                        onSelect={(val, extend) => {

                            this.textlist(val)
                            console.log('onSelect', val, extend.items)
                        }}
                    >
                        
                        {items => {
                            
                            if (items.every(item => item === null)) {
                                return '未选择'
                            } else {
                                return items.map(item => item?.label ?? '未选择').join('-')
                            }
                        }}
                        
                    </Cascader>
                    </List.Item>
                    </List>
                </Space>
            </div>
        );
    }
}

export default Shoppaddress;